// import { Button, Form, Image, Nav, NavLink } from 'react-bootstrap';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useLayoutEffect, useMemo, useState, useRef } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { IRootReducerState } from '../store/root-reducer';
import * as authAction from '../redux/auth/auth-actions';
import background from '../assets/login-background.jpg';
import logolight from '../assets/logos/logo-w.png';
// import './login.scss';
import { Button, Form } from '@douyinfe/semi-ui';

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch<any>();
  const { state } = useLocation();

  const { auth } = useSelector<IRootReducerState, any>((state) => ({ auth: state.auth }), shallowEqual);

  const [showErrMessage, setShowErrMessage] = useState(false);

  const userLogin = async (data: any) => {
    const mrktcoopToken = await dispatch(authAction.login(data));
    if (mrktcoopToken) {
      const user = await dispatch(authAction.getCurrentUserInfo(mrktcoopToken));
      if (user) {
        navigate(state?.returnUrl ?? '/');
      }
    } else {
      setShowErrMessage(true);
    }
  };

  return (
    <div className="login-form d-flex h-100">
      <div className="flex-grow-1 h-100 position-relative">
        {/* <Image
          src={background}
          className='h-100 w-100 animate__animated animate__fadeIn'
          loading='lazy'
          style={{ objectFit: 'cover' }}
        /> */}
        <div className="p-5 pt-4 position-absolute top-0 start-0">
          {/* <Image src={logolight} style={{ height: '4vh' }} /> */}
        </div>
      </div>
      <div
        style={{ flex: '0 0 35%', minWidth: '500px' }}
        className="p-5 d-flex flex-column justify-content-center position-relative"
      >
        <div className="px-5 w-100">
          <div>
            <span className="text-muted">欢迎登录使用</span>
            <div className="fs-2 fw-bolder">
              <span className="gardient-title pe-2">小程序平台</span>
            </div>
          </div>

          <Form className="py-5" onSubmit={(values) => userLogin(values)}>
            <div className="animate__animated animate__faster animate__fadeIn">
              {/* <Form.Group className='mb-3' controlId='username'> */}

              <Form.Input
                type="text"
                field="userCode"
                label="用户名"
                placeholder="请输入用户名"
                className="focus-ring"
              />

              <Form.Input type="password" label="密码" field="password" placeholder="请输入密码" />
              <div className="d-grid mb-2 pt-5 position-relative">
                {showErrMessage && (
                  <div className="position-absolute top-0 start-0 py-2">
                    <span className="text-danger">{auth.error}</span>
                  </div>
                )}
                <Button htmlType="submit">登录</Button>
              </div>
              <span className="text-muted">*账号密码请勿泄露给他人使用</span>
            </div>
          </Form>
        </div>
        <div className="position-absolute bottom-0 start-0 px-5 pb-5 w-100 d-flex justify-content-between align-items-center">
          <span className="ps-5">Copyright &copy; 2023 SEDT.</span>

          {/* <Nav className='me-5'>
            <NavLink className='text-primary p-0 text-opacity-75'>
              隐私政策
            </NavLink>
            <NavLink className='ms-2 text-primary p-0 text-opacity-75'>
              使用条款
            </NavLink>
          </Nav> */}
        </div>
      </div>
    </div>
  );
};

export default Login;
